<template>
   <div class="login-container">
      <img class="login-bg" src="../../resources/img/bg.png" alt="">
      <div class="login ">
         <div class="logo flex justify-end"><img src="../../resources/img/logo.png" alt=""></div>

         <div class="login-box">
            <div class="flex align-center justify-start mb40">
               <img src="../../resources/img/icon1.png" alt="" class="mr20">
               <h2> 로그인 하기</h2>
            </div>
            <form @submit.prevent="submitForm" class="login-form ">
               <div class="mb30">
                  <p class="mb15" for="username">아이디</p>
                  <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
               </div>
               <div>
                  <p class="mb15" for="password">비밀번호</p>
                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
               </div>
               <button class="login-btn mt50" type="submit" @click="goToApp"><img src="../../resources/img/button.png" alt=""> <p >로그인</p></button>
               <div class="flex justify-between mt40">
                  <p class="underline">아이디/비밀번호 찾기</p>
                  <p class="underline">회원가입</p>
               </div>
            </form>
         </div>
      </div>
   </div>
</template>

<script>
export default {
   data() {
      return {
         username: '',
         password: ''
      }
   },
   methods: {
      submitForm() {
         // 여기에 로그인 로직을 추가하세요.
         console.log('Username:', this.username);
         console.log('Password:', this.password);
      },
      goToApp() {
    this.$router.push('/app.page');
  }
   }
}
</script>

<style scoped></style>